import { FormEvent } from "react"
import { useAuth } from "../../context/auth-context"

export const LoginScreen = () => {
  const {user, login } = useAuth()
  // ts是鸭子类型，这是面向接口的类型，并不是面向对象的编程，即使没有引入对应的接口 类型
  // 只要对应的里面的具体的内容是一样的还是会认为是符合对应类型的
  // 比如定义一个接口interface A {id:String},如果const a = {id='1111'}
  // 这个a其实也是符合接口A类型的，在函数传参的时候也是不会报错的
  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault()
    const username = (event.currentTarget.elements[0] as HTMLFormElement).value
    const password = (event.currentTarget.elements[1] as HTMLFormElement).value
    login({
      username,
      password
    })
  }

  return <form onSubmit={handleSubmit}>
    {
      user ? <div>登录成功，用户名为:{user?.name}</div> : null
    }
    <div>
      <label htmlFor="username">用户名</label>
      <input type="text" id={'username'}/>
    </div>
    <div>
      <label htmlFor="password">密码</label>
      <input type="password" id={'password'}/>
    </div>
    <button type={'submit'}>登录</button>
  </form>
}